
<!--
* description: 维修收款明细
* author:陈靖文
* createdDate:2021-2-26
-->
<template>
  <section class="editBigAreaInfo" style="background: #ffff;height:100%">
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="费用信息" name="first">
          <!-- 客户费用信息 -->

          <QueryComponent
            ref="q1-1"
            :dynamic-inputs="formInputs1"
            title="客户费用信息"
            :form-field="formField_one"
            width="98%"
          />
          <!-- 其他费用信息 -->
          <QueryComponent
            ref="q1-2"
            :dynamic-inputs="formInputs2"
            :dynamic-tables="tableHeader1"
            :is-show-pagination="false"
            :is-show-select="false"
            :table-height="150"
            title="其他费用信息"
            :form-field="formField_two"
          />

          <QueryComponent
            ref="q1-3"
            :dynamic-tables="dynamicTables"
            :is-show-pagination="false"
            ::is-show-select="false"
            :table-height="500"
            title="收款信息"
          />
        </el-tab-pane>

        <el-tab-pane label="客户车辆信息" name="second">
          <!-- 车辆信息 -->
          <!-- 车辆信息 -->
          <QueryComponent
            :dynamic-inputs="formInputs_1"
            title="车辆信息"
            :form-field="formField_custCarInfo"
          />
          <!--          &lt;!&ndash; 派工信息 &ndash;&gt;-->
          <!--          <div class="checkbox-wrapper">-->
          <!--            <el-checkbox v-for="item in formCheckboxs" :key="item.key">{{-->
          <!--              item.text-->
          <!--            }}</el-checkbox>-->
          <!--          </div>-->
          <!--          <QueryComponent-->
          <!--            :dynamic-inputs="formInputs_2"-->
          <!--            title="派工信息"-->
          <!--          />-->
          <!--          &lt;!&ndash; 车主信息 &ndash;&gt;-->
          <!--          <QueryComponent-->
          <!--            :dynamic-inputs="formInputs_3"-->
          <!--            title="车主信息"-->
          <!--          />-->
          <!--          &lt;!&ndash; 三个文本域 &ndash;&gt;-->
          <!--          <div class="textarea-header">-->
          <!--            <div class="filter-container filter-title textarea-header__item">-->
          <!--              客户描述-->
          <!--            </div>-->
          <!--            <div class="filter-container filter-title textarea-header__item">-->
          <!--              上次建议维修项目-->
          <!--            </div>-->
          <!--            <div class="filter-container filter-title textarea-header__item">-->
          <!--              本次建议维修项目-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <OneTableTemplate :dynamic-components="textareaInputs" />-->
        </el-tab-pane>
        <el-tab-pane label="维修信息" name="three">
          <!--          &lt;!&ndash; 服务活动 &ndash;&gt;-->
          <!--          <QueryComponent-->
          <!--            ref="table_1"-->
          <!--            :dynamic-tables="tableHeader_1"-->
          <!--            :is-show-pagination="false"-->
          <!--            ::is-show-select="false"-->
          <!--            :table-height="300"-->
          <!--            title="服务活动"-->
          <!--          />-->
          <!--          &lt;!&ndash; 保养套餐/商城精品 &ndash;&gt;-->
          <!--          <QueryComponent-->
          <!--            ref="table_2"-->
          <!--            :dynamic-tables="tableHeader_2"-->
          <!--            :is-show-pagination="false"-->
          <!--            :table-height="300"-->
          <!--            title="保养套餐/商城精品"-->
          <!--          />-->
          <!-- 维修信息 -->
          <div class="filter-container filter-title">维修信息</div>

          <!-- 维修信息 表格一 -->
          <div class="mainten-table__line">
            <span class="mainten-table__line-info">维修项目</span>
          </div>
          <OneTableTemplate
            ref="table_3_1"
            :dynamic-table-cols="tableHeader_3_1"
            :is-show-pagination="false"
            :dynamic-table-defult-height="300"
            :dynamic-is-show-select="false"
          />
          <!-- 维修信息 表格二 -->
          <div class="mainten-table__line">
            <span class="mainten-table__line-info">维修备件</span>
          </div>
          <OneTableTemplate
            ref="table_3_2"
            :dynamic-table-cols="tableHeader_3_2"
            :is-show-pagination="false"
            :dynamic-table-defult-height="300"
            :dynamic-is-show-select="false"
          />
          <!-- 维修信息 表格三 -->
          <div class="mainten-table__line">
            <span class="mainten-table__line-info">其他项目</span>
          </div>

          <OneTableTemplate
            ref="table_3_3"
            :dynamic-table-cols="tableHeader_3_3"
            :is-show-pagination="false"
            :dynamic-table-defult-height="300"
            :dynamic-is-show-select="false"
          />
          <!-- 费用信息 -->
          <!-- <QueryComponent
            ref="table_4"
            :dynamic-inputs="formInputs_4"
            :dynamicTables="tableHeader_4"
            :isShowPagination="false"
            :is-show-select="false"
            :tableHeight="300"
            title="费用信息"
          ></QueryComponent> -->
        </el-tab-pane>
      </el-tabs>
    </div>
  </section>
</template>
<script>
import { formMixins } from '@/components/mixins/formMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import fetchData from '@/views/se/maintenanceManagement/maintenanceSettlement/fetchData'
import QueryComponent from '@/components/QueryComponent/QueryComponent'
import api from '@/views/se/maintenanceManagement/maintenanceCollection/api'

export default {
  name: 'Maintenansdetil',
  components: {
    OneTableTemplate,
    QueryComponent
  },

  // 组件混入对象
  mixins: [formMixins],

  props: {
    popupsVisible: { type: Boolean, default: false },
    // 从网格传入的编辑行数据(json)
    dynamicEditRowData: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },

  data() {
    return {
      formField_custCarInfo: {},
      dynamicTables: [
        {
          // SE0022
          prop: 'payModeName',
          label: '账类',
          align: 'center'
        },
        {
          prop: 'brandCode',
          label: '应收单位名称',
          align: 'center'
        },
        {
          // SE2004
          prop: 'paymentName',
          label: '付款方式',
          align: 'center'
        },
        {
          prop: 'dueAmount',
          label: '应收费用',
          align: 'center'
        },
        {
          prop: 'remark',
          label: '备注',
          align: 'center'
          // isComponent: true,
          // comps: [
          //   {
          //     compKey: 'remark',
          //     codeField: 'remark',
          //     component: () => import('@/components/org/commonInput'),
          //     rowFileds: ' ', // 网格中组件必须传
          //     isShowLabel: false,
          //     isInput: true
          //   }
          // ]
        }
      ],
      titleName: '维修结算申请',

      formField_one: { 'wiDueAmount': '', 'partDueFee': '',
        'sumOtherDueAmount': '', 'repairDueAmount': '', 'wiDiscountRate': '',
        'wiRealAmount': '', 'partDiscountRate': '',
        'partRealFee': '', 'produceDate': '',
        'repairRealAmount': '', 'remark': '' },
      formField_two: {
        claimDemage: '',
        inside: '',
        insurance: ''
      },
      // 动态组件-按钮
      // 动态组件-查询条件
      formInputs1: [
        {
          compKey: 'compKey1',
          labelName: '工时费：',
          class: 'yuan',
          codeField: 'wiDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey2',
          labelName: '备件费：',
          class: 'yuan',
          codeField: 'partDueFee',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey3',
          class: 'yuan',
          labelName: '其他费：',
          codeField: 'sumOtherDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey4',
          labelName: '费用合计：',
          class: 'yuan',
          codeField: 'repairDueAmount',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey5',
          class: 'percent',
          labelName: '工时折扣：',
          disabled: true,
          codeField: 'wiDiscountRate',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true
        },
        {
          compKey: 'compKey6',
          labelName: '应收工时：',
          class: 'yuan',
          codeField: 'wiRealAmount',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true
        },
        {
          class: 'percent',
          compKey: 'compKey7',
          labelName: '备件折扣：',
          codeField: 'partDiscountRate',
          disabled: true,
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',

          isMust: true
        },
        {
          compKey: 'compKey8',
          labelName: '应收备件：',
          codeField: 'partRealFee',
          class: 'yuan',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey9',
          labelName: '应收客户：',
          codeField: 'produceDate',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          class: 'yuan',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey10',
          labelName: '实收客户：',
          codeField: 'repairRealAmount',
          class: 'yuan',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey11',
          labelName: '备注：',
          codeField: 'remark',
          component: () => import('@/components/org/commonInput'),
          type: 'dropdownList',
          disabled: true,
          isMust: true,
          span: 12
        }
      ],
      // 动态组件-查询条件
      formInputs2: [
        {
          compKey: 'compKey1',
          labelName: '索赔：',
          codeField: 'claimDemage',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          class: 'yuan',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'compKey2',
          class: 'yuan',
          labelName: '内部：',
          codeField: 'inside',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        },
        {
          compKey: 'insurance',
          class: 'yuan',
          labelName: '保险：',
          codeField: 'insurance',
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          disabled: true,
          isMust: true
        }
      ],
      formInputs_1: [
        {
          compKey: 'key0',
          labelName: '车牌号：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: 'VIN码：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '品牌：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车系：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '车型编码：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '车型名称：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key13',
          labelName: '电机号：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '颜色：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key9',
          labelName: '购车日期：',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key10',
          labelName: '交车日期：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '车辆用途：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],

      formInputs_2: [
        {
          compKey: 'key0',
          labelName: '派工单号：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '服务顾问：',
          codeField: 'saleOrderCode',
          lookuptype: 'VE0185',
          component: () => import('@/components/org/LookupValue'),
          type: 'dropdownList',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '送修人：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '送修人电话：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '到店时间：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '预计交车时间：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '行驶里程：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '工单状态：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      formCheckboxs: [
        {
          key: 'key0',
          text: '洗车',
          model: ''
        },
        {
          key: 'key1',
          text: '在店等待',
          model: ''
        },
        {
          key: 'key2',
          text: '救援',
          model: ''
        },
        {
          key: 'key3',
          text: '库存车',
          model: ''
        }

      ],
      textareaInputs: [
        {
          compKey: 'key0',
          // labelName: "详细地址：",
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'key1',
          // labelName: "详细地址：",
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8
        },
        {
          compKey: 'key2',
          // labelName: "详细地址：",
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 8
        }
      ],

      activeName: 'first',

      tableHeader1: [
        {
          prop: 'pdi',
          label: 'PDI',
          align: 'center'
        },
        {
          prop: 'mb',
          label: '免保',
          align: 'center'
        },
        {
          prop: 'sp',
          label: '索赔',
          align: 'center'
        },
        {
          prop: 'yb',
          label: '延保',
          align: 'center'
        },
        {
          prop: 'wf',
          label: '外返',
          align: 'center'
        },
        {
          prop: 'nf',
          label: '内返',
          align: 'center'
        },
        {
          prop: 'by',
          label: '保养',
          align: 'center'
        },
        {
          prop: 'sg',
          label: '事故',
          align: 'center'
        },
        {
          prop: 'jx',
          label: '机修',
          align: 'center'
        },
        {
          prop: 'qt',
          label: '其他',
          align: 'center'
        },
        {
          prop: 'amount',
          label: '整单合计',
          align: 'center'
        }
      ],

      formInputs_3: [
        {
          compKey: 'key0',
          labelName: '用户ID：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '车主姓名：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '车主电话：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '车主性质：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '证件号码：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '省份：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '城市：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '区县：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key8',
          labelName: '详细地址：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput/textareaInput'),
          // type: "textarea",
          type: 'inputText',
          isMust: true,
          span: 18,
          disabled: true
        }
      ],

      formField: {},

      tableHeader_1: [
        {
          label: '活动编号',
          prop: ''
        },
        {
          label: '活动名称',
          prop: ''
        },
        {
          label: '活动类型',
          prop: ''
        },
        {
          label: '开始日期',
          prop: ''
        },
        {
          label: '结束日期',
          prop: ''
        }
      ],
      tableHeader_2: [
        {
          label: '订单号',
          prop: ''
        },
        {
          label: '类别',
          prop: ''
        },
        {
          label: '保养套餐/精品编码',
          prop: ''
        },
        {
          label: '保养套餐/精品名称',
          prop: ''
        },
        {
          label: '使用次数/数量',
          prop: ''
        },
        {
          label: '有效日期',
          prop: ''
        },
        {
          label: '购车日期',
          prop: ''
        }
      ],
      // 维修项目
      tableHeader_3_1: [
        {
          label: '工时编码',
          prop: 'wiCode'
        },
        {
          label: '维修内容',
          prop: 'wiName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '工时数',
          prop: 'saleWorkQty'
        },
        {
          label: '工时单价',
          prop: 'wiPrice'
        },
        {
          label: '费用合计',
          prop: 'wiAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '费用预估',
          prop: 'wiPreAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isEntrust'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 维修备件
      tableHeader_3_2: [
        {
          label: '备件编码',
          prop: 'partNo'
        },
        {
          label: '备件名称',
          prop: 'partName'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '数量',
          prop: 'partQty'
        },
        {
          label: '单价',
          prop: 'partPrice'
        },
        {
          label: '费用合计',
          prop: 'partAmount'
        },
        {
          label: '维修类型',
          prop: 'repairTypeName'
        },
        {
          label: '维修类别',
          prop: 'retRepairTypeName'
        },
        {
          label: '费用预估',
          prop: 'prePartAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'comboSaleCode'
        },
        {
          label: '是否委外',
          prop: 'isAssign'
        },
        {
          label: '备注',
          prop: 'note'
        }
      ],
      // 其他项目
      tableHeader_3_3: [
        {
          label: '其他项目',
          prop: 'otherAmountType'
        },
        {
          label: '付费性质',
          prop: 'payKindName'
        },
        {
          label: '费用',
          prop: 'otherAmount'
        },
        {
          label: '套餐/精品编码',
          prop: 'servicePackageCode'
        },
        {
          label: '备注',
          prop: 'remark'
        }
      ],
      formInputs_4: [
        {
          compKey: 'key0',
          labelName: '索赔：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key1',
          labelName: '内部：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key2',
          labelName: '保险：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key3',
          labelName: '客户：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key4',
          labelName: '工时费：',
          codeField: 'isAssign',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key5',
          labelName: '备件费：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key6',
          labelName: '其他费用：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        },
        {
          compKey: 'key7',
          labelName: '费用合计：',
          codeField: 'saleOrderCode',
          isMul: false,
          component: () => import('@/components/org/commonInput'),
          type: 'inputText',
          isMust: true,
          disabled: true
        }
      ],
      // tableHeader_4: [
      //   {
      //     label: "PDI",
      //     prop: "",
      //   },
      //   {
      //     label: "首保",
      //     prop: "",
      //   },
      //   {
      //     label: "索赔",
      //     prop: "",
      //   },
      //   {
      //     label: "延保",
      //     prop: "",
      //   },
      //   {
      //     label: "外返",
      //     prop: "",
      //   },
      //   {
      //     label: "内返",
      //     prop: "",
      //   },
      //   {
      //     label: "定保",
      //     prop: "",
      //   },
      //   {
      //     label: "事故",
      //     prop: "",
      //   },
      //   {
      //     label: "机修",
      //     prop: "",
      //   },
      //   {
      //     label: "商城",
      //     prop: "",
      //   },
      //   {
      //     label: "其他",
      //     prop: "",
      //   },
      // ],

      formField2: {},
      row: {}
    }
  },
  computed: {
    formFieldNew() {
      return this.$utils.deepCopy(this.formField_one)
    }
  },
  watch: {
    '$route.params': function(val) {
      if (Object.prototype.hasOwnProperty.call(val, 'row')) {
        this.row = val['row']
        // 客户费用信息赋值
        this.loadFields()
        // 加载收款信息数据
        this.loadData()
        fetchData.getTabData.call(this)
      }
    },
    'formFieldNew': {
      handler(newval, oldval) {
        // 工时未打折费用
        const wiP = Number(newval['wiDueAmount'])
        // 备件未打折费用
        const partP = Number(newval['partDueFee'])
        // 折后工时费用
        const wiA = Number(newval['wiRealAmount'])
        // 折后备件费用
        const partA = Number(newval['partRealFee'])
        this.$nextTick(() => {
          if (wiP !== 0 || wiA !== 0) {
            this.formField_one['wiDiscountRate'] = ((wiA / wiP) * 100).toFixed(2)
          } else {
            this.formField_one['wiDiscountRate'] = 0
          }
          if (partP !== 0 || partA !== 0) {
            this.formField_one['partDiscountRate'] = ((partA / partP) * 100).toFixed(2)
          } else {
            this.formField_one['partDiscountRate'] = 0
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.formField_custCarInfo = this.getFormField(this.formInputs_1)
  },
  mounted() {
    this.getList(this.$route.params)
  },

  methods: {
    getList(val) {
      if (Object.prototype.hasOwnProperty.call(val, 'row')) {
        this.row = val['row']
        // 客户费用信息赋值
        this.loadFields()
        // 加载收款信息数据
        this.loadData()
        fetchData.getTabData.call(this)
      }
    },
    // 生成formField
    genUtil: (array) => (attr1 = 'codeField', attr2 = 'textField') => array.reduce((p, c) => {
      p[c[attr1]] = ''
      // eslint-disable-next-line no-prototype-builtins
      c.hasOwnProperty(attr2) ? p[c[attr2]] = '' : ''
      return p
    }, {}),
    getFormField(tableComponents) {
      return this.genUtil(tableComponents)()
    },
    loadFields() {
      for (const attr in this.formField_one) {
        this.formField_one[attr] = this.row[attr]
      }
    },
    loadData() {
      const { repairOrderCode, repairOrderId, custName } = this.row
      // 加载数据请求
      const loading = this.$loading({ text: `正在加载数据,请稍等...` })
      this.$requestAPI({
        apiUrl: api.queryGatheringUsingPOST.APIUrl,
        variables: { repairOrderId, repairOrderCode, custName }
      }).then(res => {
        if (res.result === '1') {
          const otherData = res['rows'][0]['other'][0]
          // 其它费用赋值
          for (const attr in this.formField_two) {
            this.formField_two[attr] = otherData[attr]
          }
          this.$refs['q1-3'].$refs['multipleTable'].list = res['rows'][0]['settlement']
          // q1-2
          this.$refs['q1-2'].$refs['multipleTable'].list = res['rows'][0]['sum']
        } else {
          this.$message(res.msg ? res.msg : '')
        }
      }).catch(err => {
        if (err.response.data.msg) {
          this.$message(err.response.data.msg)
        } else {
          this.$message(err.message)
        }
      }).finally(() => {
        loading.close()
      })
    },

    closeEdit() {
      this.$emit('close')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    }
  }
}
</script>

<style lang="scss" scoped>
.btns-container {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
  .el-button {
    float: right;
  }
}
.checkbox-wrapper {
  width: 100%;
  padding: 0 10px;
  background-color: #fff;
  .el-checkbox {
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
}
.textarea-header {
  width: 100%;
  height: 30px;
  background-color: #fff;
  &__item {
    width: calc(100% / 3);
    float: left;
  }
}
.mainten-select {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  background-color: #fff;
}
.mainten-table__line {
  width: 100%;
  height: 30px;
  padding: 0 20px;
  line-height: 30px;
  background-color: #fff;
  &-info {
    float: left;
  }
  &-btns {
    float: right;
  }
}
/deep/.percent .el-input.el-input--small.el-input--suffix::after {
  content: '%';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
/deep/.yuan .el-input.el-input--small.el-input--suffix::after {
  content: '元';
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}
</style>
